import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:zootix/screens/mine/zt_mine.controller.dart';
import 'package:zootix/screens/mine/zt_mine_about.dart';
import 'package:zootix/screens/mine/zt_mine_block.dart';
import 'package:zootix/screens/mine/zt_mine_mytickets.dart';
import 'package:zootix/screens/mine/zt_mine_settings.dart';
import 'package:zootix/services/zt_service.dart';
import 'package:zootix/store/zt_auth.store.dart';
import 'package:zootix/util/zt_common.util.dart';
import 'package:zootix/util/zt_screen_adaper_util.dart';
import 'package:zootix/widgets/zt_want_keep_alive.dart';
import 'package:zootix/widgets/zt_customer_servicer.dart';
import 'package:zootix/widgets/zt_my_avatar.dart';
import 'package:zootix/widgets/zt_my_coins.dart';
import 'package:zootix/zt_app_theme.dart';
import 'package:zootix/constants/zt_router.dart';

import '../../constants/zt_constants.dart';

class MinePage extends StatefulWidget {
  MinePage({super.key});

  @override
  State<MinePage> createState() => _MinePageState();
}

class _MinePageState extends State<MinePage>
    with SingleTickerProviderStateMixin {
  final _controller = Get.put<ZtMineController>(ZtMineController());

  @override
  void initState() {
    super.initState();
    _controller.tabController ??= TabController(
        initialIndex: _controller.selectedTabIndex.value,
        length: 4,
        vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return _buildBody();
  }

  Widget _buildBody() {
    return Column(mainAxisSize: MainAxisSize.max, children: [
      Container(
        height: ZtScreenAdaper.height(360),
        width: ZtScreenAdaper.screenWidth(),
        decoration: const BoxDecoration(
            image: DecorationImage(
                fit: BoxFit.cover,
                image: AssetImage('assets/images/mine_bg.png'))),
        child: Padding(
          padding: EdgeInsets.symmetric(
              horizontal: ZtScreenAdaper.width(20),
              vertical: ZtScreenAdaper.height(20)),
          child: Column(children: [
            SizedBox(
              height: ZtScreenAdaper.height(30),
            ),
            Row(
              children: [
                const ZtMyCoinsWidget(),
                const Spacer(),
                Container(
                  height: ZtScreenAdaper.width(40),
                  width: ZtScreenAdaper.width(40),
                  padding: EdgeInsets.all(ZtScreenAdaper.width(2)),
                  decoration: BoxDecoration(
                      borderRadius:
                          BorderRadius.circular(ZtScreenAdaper.sp(40)),
                      color: const Color(0xFF000000).withOpacity(0.3)),
                  child: const ZtCustomerServicerWdiget(),
                )
              ],
            ),
            SizedBox(
              height: ZtScreenAdaper.height(120),
            ),
            Row(
              children: [
                Expanded(
                    child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Obx(() => Text(
                              ZtAuthStore.to.userInfo.value.nickname ?? '',
                              style: TextStyle(
                                  fontSize: ZtScreenAdaper.sp(20),
                                  fontWeight: FontWeight.w400),
                            )),
                        SizedBox(
                          width: ZtScreenAdaper.width(3),
                        ),
                        InkWell(
                          onTap: () {
                            Get.toNamed(ZtRouteConfig.userinfo);
                          },
                          child: Image(
                            image:
                                const AssetImage('assets/images/edit_icon.png'),
                            height: ZtScreenAdaper.width(20),
                          ),
                        )
                      ],
                    ),
                    SizedBox(
                      height: ZtScreenAdaper.height(15),
                    ),
                    Text(
                        ZtStorageService.to.getString(ZtCacheKeys.deviceUUID) ??
                            ''),
                    Row(
                      children: [
                        SizedBox(
                          width: ZtScreenAdaper.width(210),
                          child: Text(
                            'ID: ${ZtAuthStore.to.userInfo.value.userId}',
                            overflow: TextOverflow.ellipsis,
                            maxLines: 2,
                            style: TextStyle(
                                fontSize: ZtScreenAdaper.sp(16),
                                color: Colors.grey[500]),
                          ),
                        ),
                        InkWell(
                          onTap: () {
                            ZtCommonUtil.doCopy(
                                ZtAuthStore.to.userInfo.value.userId!);
                          },
                          child: Container(
                              alignment: Alignment.topCenter,
                              width: ZtScreenAdaper.width(50),
                              height: ZtScreenAdaper.height(30),
                              padding: EdgeInsets.symmetric(
                                  horizontal: ZtScreenAdaper.width(5)),
                              decoration: BoxDecoration(
                                  color: const Color(0xFF454545),
                                  borderRadius: BorderRadius.circular(5)),
                              child: Text('copy',
                                  style: TextStyle(
                                      color: ZtAppTheme.white,
                                      fontSize: ZtScreenAdaper.sp(16)))),
                        )
                      ],
                    )
                  ],
                )),
                ZtMyAvatarWidget()
              ],
            )
          ]),
        ),
      ),
      Expanded(
          child: DefaultTabController(
              length: 4,
              initialIndex: _controller.selectedTabIndex.value,
              child: Scaffold(
                  backgroundColor: ZtAppTheme.white,
                  appBar: AppBar(
                    backgroundColor: ZtAppTheme.white,
                    elevation: 0,
                    automaticallyImplyLeading: false,
                    flexibleSpace: _buildTabBar(),
                  ),
                  body: _buildTabView())))
    ]);
  }

  Widget _buildTabBar() {
    final tabs = _controller.mineTabs
        .asMap()
        .map((index, item) {
          return MapEntry(
              index,
              Obx(
                () => Tab(
                    child: Image(
                        image: AssetImage(
                            'assets/images/$item${_controller.selectedTabIndex.value == index ? '_active' : ''}.png'))),
              ));
        })
        .values
        .toList();

    return Container(
      margin: EdgeInsets.only(top: ZtScreenAdaper.height(20)),
      padding: EdgeInsets.symmetric(vertical: ZtScreenAdaper.height(10)),
      decoration: const BoxDecoration(
          border: Border.symmetric(
              horizontal: BorderSide(color: Color(0xFFCCCCCC)))),
      child: TabBar(
        controller: _controller.tabController,
        tabs: tabs,
        indicator: const BoxDecoration(),
        onTap: (index) {
          _controller.selectedTabIndex.value = index;
        }, /*  */
      ),
    );
  }

  Widget _buildTabView() {
    return TabBarView(
      controller: _controller.tabController,
      physics: const NeverScrollableScrollPhysics(),
      children: [
        const ZtMineMyTickets(),
        ZtMineBlockPage(),
        ZtWantKeepAlive(child: ZtMineAboutPage()),
        ZtWantKeepAlive(child: ZtMineSettingsPage()),
      ],
    );
  }
}
